<template>
  <div id="mapContainer" style="width: 100%; height: 400px"></div>
  <div class="input-card" style="
      position: absolute;
      top: 15px;
      z-index: 999;
      width: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid black;
      border-radius: 5px;
    ">
    <button class="btn" @click="createPolygon" style="
        margin-top: 5px;
        margin-bottom: 5px;
        border: 1px solid;
        width: 80%;
        border-radius: 15px;
      ">
      新建
    </button>
    <button class="btn" @click="open" style="margin-bottom: 5px; border: 1px solid; width: 80%; border-radius: 15px">
      开始编辑
    </button>
    <button class="btn" @click="close" style="margin-bottom: 5px; width: 80%; border: 1px solid; border-radius: 15px">
      结束编辑
    </button>
    <button class="btn" @click="clearMarker"
      style="margin-bottom: 5px; width: 80%; border: 1px solid; border-radius: 15px">
      清除固定点
    </button>
    <button class="btn" @click="addMarker" style="margin-bottom: 5px; width: 80%; border: 1px solid; border-radius: 15px">
      添加固定点
    </button>
    <button class="btn" @click="updateContent"
      style="margin-bottom: 5px; width: 80%; border: 1px solid; border-radius: 15px">
      更新固定点
    </button>
  </div>
</template>


<script setup lang="ts">
import { onMounted, reactive, toRefs, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';

import axios from 'axios';
var markers: any = []
let map: any = null
let polyEditor: any = ''
const positions = [
  [104.696953, 28.793704],
  [104.678757, 28.805814],
  [104.667127, 28.776026]
]
let markerd: any = ''
var path2 = [
  [104.696363, 28.793883],
  [104.69691, 28.794071],
  [104.6972, 28.79361],
  [104.696352, 28.793018],
  [104.696266, 28.793159],
  [104.696567, 28.793432],
]
var path3 = [
  [104.676761, 28.806838],
  [104.679293, 28.808775],
  [104.680581, 28.807384],
  [104.679765, 28.806632],
  [104.679937, 28.806293],
  [104.677341, 28.804432],
]
var path4 = [
  [104.664927, 28.774653],
  [104.667738, 28.778076],
  [104.669026, 28.777042],
  [104.665914, 28.773939],
]
const paths = [path2, path3, path4];
const createPolygon = () => {
  polyEditor.close()
  polyEditor.setTarget()
  polyEditor.open()
}
const close = () => {
  polyEditor.close()
  console.log(polyEditor, map, 5566)
}
const open = () => {
  polyEditor.open()
}

function clearMarker() {
  markers[1].setMap(null)
}

function addMarker() {
  markerd = new AMap.Marker({
    icon: new AMap.Icon({
      size: new AMap.Size(30, 40), // 设置图标大小
      image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
      imageSize: new AMap.Size(30, 40) // 设置图标图片大小
    }),
    position: [104.662347, 28.778041],
    offset: new AMap.Pixel(-13, -30)
  })
  markerd.setMap(map)
}

function updateContent() {
  if (!markers) {
    return
  }
  // 自定义点标记内容
  var markerContent = document.createElement('div')

  // 点标记中的图标
  var markerImg = document.createElement('img')
  markerImg.className = 'markerlnglat'
  markerImg.src = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
  markerImg.setAttribute('width', '30px')
  markerImg.setAttribute('height', '40px')
  markerContent.appendChild(markerImg)

  // 点标记中的文本
  var markerSpan = document.createElement('span')
  markerSpan.className = 'marker'
  markerContent.appendChild(markerSpan)

  markerd.setContent(markerContent) //更新点标记内容
  markerd.setPosition([104.662347, 28.778041]) //更新点标记位置
}
function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: '41436e65e98651d6c173e1425d3f20ae',
  }
  AMapLoader.load({
    key: "3cdd86f4180028094285661936cbb7d8", // 申请好的WEB端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.PolygonEditor",
      "AMap.Autocomplete",
      "AMap.PlaceSearch",
      "AMap.Scale",
      "AMap.OverView",
      "AMap.ToolBar",
      "AMap.MapType",
      "AMap.PolyEditor",
      "AMap.CircleEditor",
      "AMap.Geolocation",
      "AMap.Geocoder",
      "AMap.Polygon",
      "AMap.AMapUI",], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    map = new AMap.Map("mapContainer", {  //设置地图容器id
      viewMode: "2D",    //是否为3D地图模式
      zoom: 10,           //初始化地图级别
      center: [104.630825, 28.760189], //初始化地图中心点位置
    });
    axios.get("https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=511502").then((geojson) => {
      let outer = [
        new AMap.LngLat(-360, 90, true),
        new AMap.LngLat(-360, -90, true),
        new AMap.LngLat(360, -90, true),
        new AMap.LngLat(360, 90, true),
      ];
      console.log(geojson.data);

      let pathArray = [
        outer, //外边界
        geojson.data.features[0].geometry.coordinates[0][0]
        //内边界需要遮罩区域
      ];
      var polygon = new AMap.Polygon({
        pathL: pathArray,
        strokeColor: "rgba(190, 161, 58, 1)",
        strokeWeight: 2,
        fillColor: "rgba(0,0,0,.5)",
      });
      polygon.setPath(pathArray);
      map.add(polygon);




    });


    polyEditor = new AMap.PolygonEditor(map)
    // console.log(polyEditor, 78998889);

    //图标属性
    for (var i = 0, marker; i < positions.length; i++) {
      marker = new AMap.Marker({
        map: map,
        icon: new AMap.Icon({
          size: new AMap.Size(30, 40), // 设置图标大小
          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-' + (i + 1) + '.png',
          imageSize: new AMap.Size(30, 40) // 设置图标图片大小
        }),
        position: positions[i],
        anchor: 'bottom-center'
      })

      markers.push(marker)
    }
    //多边形划分
    for (let i = 0; i < paths.length; i++) {
      const polygons = new AMap.Polygon({
        path: paths[i]
      });
      map.add(polygons);
      polyEditor.addAdsorbPolygons([polygons]);
      polygons.on('dblclick', () => {
        polyEditor.setTarget(polygons);
        polyEditor.open();
      });

    }
    map.setFitView()
    // polyEditor.addAdsorbPolygons([polygon2])
    polyEditor.on('add', function (data) {
      console.log(456)

      const polygon = data.target
      polyEditor.addAdsorbPolygons(polygon)

      polygon.on('dblclick', () => {
        polyEditor.setTarget(polygon)
        polyEditor.open()
        console.log(5566)
      })
    })

    // polygon2.on('dblclick', () => {
    //   polyEditor.setTarget(polygon2)
    //   polyEditor.open()
    // })

    polyEditor.open()

  }).catch(e => {
    console.log(e);
  })
}
onMounted(() => {
  initMap()

})

</script>
